<!--
 * @Company: LESSO
 * @Author: wyq 974272605@qq.com
 * @LastEditTime: 2023-01-12
 * @Description: 
 * @FilePath: \kindleclock\src\views\index.vue
-->
<template>
  <div class="contain">
    <div class="header">
      <div class="flex-between limtwidth">
        <!-- 地址 -->
        <div class="flex-start">
          <img class="header-img" src="../assets/img/local.png" alt="" />
          <span>中山市</span>
        </div>

        <div class="flex-start" @click="fullScreen">
          <img class="header-img" src="../assets/img/home.png" alt="" />
          <span>家</span>
        </div>

        <div class="flex-start">
          <img  class="header-img" src="../assets/img/time.png" alt="" />
          <span>{{ weatherData.todays }}</span>
        </div>
      </div>
    </div>

    <!-- 每日一句 -->
    <div class="daysdes">『 {{ everydataDes }}』</div>

    <!-- 翻页效果时钟 -->
    <clock class="clock"></clock>

    <!-- 天气 -->
    <div class="weather flex-start">
      <div class="item-left">
        <span class="icon"><i :class="'qi-' + weatherData.icon"></i></span>
        <span class="des">温度：{{ weatherData.temp }} ℃</span>
        <span class="des">天气：{{ weatherData.text }}</span>

        <span class="des" style="margin-top: 14px"
          >最低：{{ weatherData.tempMin }} ℃</span
        >
        <span class="des">最高：{{ weatherData.tempMax }} ℃</span>
      </div>

      <div class="itme-right">
        <!-- kindle版本太低，grid样式不生效 -->
        <div class="flex-between">
          <div class="little-item">
            <span>{{ weatherData.windScale }} 级</span>
            <p>风力</p>
          </div>

          <div class="little-item">
            <span>{{ weatherData.humidity }}%</span>
            <p>湿度</p>
          </div>

          <div class="little-item">
            <span>{{ weatherData.rays }}</span>
            <p>紫外线</p>
          </div>
        </div>

        <div class="flex-between">
          <div class="little-item">
            <span>良</span>
            <p>空气质量</p>
          </div>

          <div class="little-item">
            <span>{{ weatherData.feelsLike }}℃</span>
            <p>体感温度</p>
          </div>

          <div class="little-item">
            <span>{{ weatherData.allergy }}</span>
            <p>过敏指数</p>
          </div>
        </div>

        <div class="flex-between">
          <div class="little-item">
            <span>{{ weatherData.cold }}</span>
            <p>感冒指数</p>
          </div>

          <div class="little-item">
            <span>{{ weatherData.sunscreen }}</span>
            <p>防晒指数</p>
          </div>

          <div class="little-item">
            <span>{{ weatherData.makeup }}</span>
            <p>化妆指数</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 未来三天天气 -->
    <div class="futures">
      <div class="title">明后两天预报</div>

      <div
        class="days flex-between"
        v-for="(item, index) in futureWeather"
        :key="item.id"
      >
        <div class="days-left flex-start">
          <div class="time">
            <div>{{ index == 0 ? "明天" : "后天" }}</div>
            <p>{{ item.fxDate }}</p>
          </div>

          <div class="flex-start line-middle">
            <i :class="'qi-' + item.iconDay"></i>
            <p>{{ item.tempMax }}℃</p>
          </div>
        </div>

        <div class="days-middle">
          <span></span>
        </div>

        <div class="flex-end days-right">
          <p>{{ item.tempMin }}℃</p>
          <i :class="'qi-' + item.iconNight"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import clock from "@/components/clock.vue";
import moment from "moment";
export default {
  components: {
    clock,
  },
  data() {
    return {
      isFull: false,
      everydataDes: "", //每日一句
      weatherData: {
        icon: "", // 天气的icon’
        text: "", // 天气状况
        temp: "", // 当前温度
        windScale: "", //风力
        humidity: "", // 湿度
        feelsLike: "", // 体感温度

        rays: "", // 紫外线
        allergy: "", //过敏指数
        cold: "", // 感冒指数
        sunscreen: "", //防晒指数
        makeup: "", //化妆指数

        tempMax: "", // 最高温度
        tempMin: "", // 最低温度
        todays: "", // 今日日期
      },

      // 未来三天天气数据
      futureWeather: {},
    };
  },

  created() {
    // 每日一句--每天零点更新
    this.getEverydayDes();

    // 当前天气--每小时更新
    this.getWeather();

    // 天气指数预报--每小时更新
    this.getIndices();

    // 未来三天的天气--每天零点更新
    this.getfuture();

    this.residueTemp();
    this.pointRefresh();
  },

  methods: {
    // 每日一句 --- 每天零点更新
    getEverydayDes() {
      axios.get("https://v1.hitokoto.cn/").then((res) => {
        console.log("每日一句", res.data);
        this.everydataDes = res.data.hitokoto;
      });
    },

    // 当前天气--气温---每小时自动更新
    getWeather() {
      let that = this;
      axios
        .get(
          "https://devapi.qweather.com/v7/weather/now?location=101281701&key=9df85b1369984a1f916d14bc80e4732b"
        )
        .then((res) => {
          if (res.data.code == 200) {
            let Res = res.data.now;
            let weatherData = that.weatherData;
            console.log("当前天气：", Res);
            weatherData.icon = Res.icon;
            weatherData.text = Res.text;
            weatherData.temp = Res.temp;
            weatherData.windScale = Res.windScale;
            weatherData.humidity = Res.humidity;
            weatherData.feelsLike = Res.feelsLike;
          }
        });
    },

    // 获取天气指数---每小时自动更新
    getIndices() {
      let that = this;
      // 5:紫外线指数
      // 7:花粉过敏指数
      // 9:感冒指数
      // 13:化妆指数
      // 16:防晒指数
      axios
        .get(
          "https://devapi.qweather.com/v7/indices/1d?type=5,7,9,13,16&location=101281701&key=9df85b1369984a1f916d14bc80e4732b"
        )
        .then((res) => {
          if (res.data.code == 200) {
            let Res = res.data.daily;
            let weatherData = that.weatherData;
            console.log("当前天气指数：", Res);
            let arr5 = Res.find((item) => item.type == 5);
            let arr7 = Res.find((item) => item.type == 7);
            let arr9 = Res.find((item) => item.type == 9);
            let arr13 = Res.find((item) => item.type == 13);
            let arr16 = Res.find((item) => item.type == 16);
            weatherData.rays = arr5.category;
            weatherData.allergy = arr7.category;
            weatherData.cold = arr9.category;
            weatherData.makeup = arr13.category;
            weatherData.sunscreen = arr16.category;
          }
        });
    },

    // 未来两天天的天气 ---每天0点更新
    getfuture() {
      let that = this;
      axios
        .get(
          "https://devapi.qweather.com/v7/weather/3d?location=101281701&key=9df85b1369984a1f916d14bc80e4732b"
        )
        .then((res) => {
          if (res.data.code == 200) {
            let Res = res.data.daily;
            let weatherData = that.weatherData;
            console.log("未来三天天气：", Res);
            weatherData.tempMax = Res[0].tempMax; // 今天最高温度
            weatherData.tempMin = Res[0].tempMin; // 今天最低温度
            weatherData.todays = Res[0].fxDate; // 今天日期
            this.futureWeather = Res.filter((item, index) => {
              return index != 0;
            });

            console.log(this.futureWeather);
          }
        });
    },

    // 整点刷新
    residueTemp() {
      let that = this;
      let nowTemp = new Date().getTime(); //获取当前时间戳
      let nexthoursTemp = new Date(
        moment().add(1, "hours").format("YYYY-MM-DD H:mm:ss").substr(0, 14) +
          ":00:00"
      ).getTime(); //获取下个小时整点的时间戳
      let residueTemp = nexthoursTemp - nowTemp; //当前距离下个小时整点的时间戳
      console.log("整点刷新", residueTemp);
      //执行定时任务
      setTimeout(() => {
        that.getWeather();
        that.getIndices();
        //次时0点 执行下个小时整点刷新
        setInterval(() => {
          that.getWeather();
          that.getIndices();
        }, 1000 * 60 * 60);
      }, residueTemp);
    },

    // 24点刷新
    pointRefresh() {
      let that = this;
      let nowTemp = new Date().getTime(); //获取当前时间戳
      let tomorrowTemp = new Date(
        moment().add(1, "days").format().substr(0, 10) + " 00:00:00"
      ).getTime(); //获取今天24：00的时间戳
      let residueTemp = tomorrowTemp - nowTemp; //距离当天24：00的时间戳
      console.log("24点刷新", residueTemp);
      //执行定时任务
      setTimeout(() => {
        that.getEverydayDes();
        that.getfuture();
        //次天0点 执行每天24;00 刷新
        setInterval(() => {
          that.getEverydayDes();
          that.getfuture();
        }, 1000 * 60 * 60 * 24);
      }, residueTemp);
    },

    // 全屏 非全屏
    fullScreen() {
      console.log("this.isFull", this.isFull);
      let el = document.documentElement;
      console.log("el", el);
      if (this.isFull) {
        //退出全屏
        // 不同浏览器兼容方法调用
        if (el.requestFullScreen) {
          el.requestFullScreen();
        } else if (el.webkitRequestFullScreen) {
          el.webkitRequestFullScreen();
        } else if (el.mozRequestFullScreen) {
          el.mozRequestFullScreen();
        } else if (el.msRequestFullScreen) {
          el.msRequestFullScreen();
        }
      } else {
        //进入全屏
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msCancelFullScreen) {
          document.msCancelFullScreen();
        }
      }
      this.isFull = !this.isFull;
    },
  },
};
</script>

<style lang="less" scoped>
.contain {
  display: flex;
  flex-direction: column;
  color: #222222;
  // border: 1px solid red;
  margin: 0 auto;
  .header {
    width: 100%;
    height: 100px;
    line-height: 100px;
    background: #ffffff;
    font-size: 32px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    box-shadow: inset -1px 0px 0px 0px rgba(221, 221, 221, 1);

    // border: 1px solid;
    .limtwidth {
      width: 90%;
      margin: auto;
      .header-img {
        display: block;
        width: 40px;
        height: 40px;
        margin: 25px 5px;
      }
    }
  }

  .daysdes {
    margin: 40px auto 20px auto;
    height: 80px;
    font-size: 32px;
    line-height: 40px;
    word-wrap: break-word;
    font-weight: 600;
    padding: 0 20px;
    text-align: center;
  }

  .weather {
    font-size: 20px;
    width: 90%;
    height: 360px;
    margin: 40px auto 40px auto;
    background: rgba(255, 255, 255, 1);
    box-shadow: inset 0px -1px 0px 0px rgba(221, 221, 221, 1);
    border-radius: 15px;
    .item-left {
      margin: 20px 0px 20px 30px;
      width: 185px;
      // border: 1px solid;
      span {
        display: block;
      }
      .icon {
        font-size: 100px;
        font-weight: 400;
        // text-align: center;
      }
      .des {
        font-size: 32px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 600;
        line-height: 50px;
      }
    }
    .itme-right {
      flex: 1;
      // border: 2px solid red;
      margin: 20px 24px;

      .little-item {
        width: 30%;
        height: 90px;
        font-weight: 400;
        line-height: 45px;
        margin-bottom: 25px;
        text-align: center;
        // border: 1px solid;

        span {
          font-weight: 600;
          font-size: 28px;
        }

        p {
          font-size: 26px;
          color: #999aaa;
        }
      }
    }
  }

  .futures {
    width: 90%;
    margin: 0 auto;
    .title {
      margin-left: 32px;
      font-size: 32px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
    }

    .days {
      height: 110px;
      background: rgba(255, 255, 255, 0.6);
      margin: 20px auto;
      box-shadow: inset 0px -1px 0px 0px rgba(221, 221, 221, 1);
      border-radius: 8px;

      .days-left {
        width: 40%;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        .time {
          margin: 20px 15px 20px 30px;
          font-size: 32px;
          p{
            display: block !important;
            margin-top: 10px;
          }
        }
        .line-middle {
          margin-left: 20px;
          line-height: 110px;
          i {
            display: block;
            font-size: 50px;
            margin: auto 20px auto 0px;
          }
          p {
              font-size: 32px !important;
            }
        }
      }
      .days-middle {
        width: 30%;
        height: 110px;
        display: block;
        border: 1px solid white;
        span {
          width: 100%;
          height: 3px;
          background: #999999;
          border-radius: 4px;
          display: block !important;
          margin-top: 51px;
        }
      }

      .days-right {
        width: 15%;
        line-height: 110px;
        text-align: right;
        padding-right: 10px;
        p {
          margin-right: 20px !important;
          font-size: 32px;
        }
        i {
          display: block;
          font-size: 50px;
        }
      }
    }
  }
}
</style>